<template>
  <span class="stars-wrapper">
    <span :class="['iconfont icon-star',{active:starNum >=1}]"></span>
    <span :class="['iconfont icon-star',{active:starNum >=2}]"></span>
    <span :class="['iconfont icon-star',{active:starNum >=3}]"></span>
    <span :class="['iconfont icon-star',{active:starNum >=4}]"></span>
    <span :class="['iconfont icon-star',{active:starNum >=5}]"></span>
  </span>
</template>
              
<script>
export default {
  name: "Stars",
  props: {
    starNum: Number
  }
};
</script>
              
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.stars-wrapper {
  color: #ccc;
  .iconfont{
    display: inline-block;
    margin-right: 0.02rem;
  }
  .active {
    color: $starColor;
  }
}
</style>